<template>
	<div id="backgrounding">
		<el-container>
			<el-aside width="50%">
				<div class="dialog dialog-shadow">
					<el-form  class="LoginForm">
					<span class="title">网上书店系统--用户登录</span>
						<el-row style="margin-top:20px;">
							<el-col :span="3" style="font-size:15px;line-height:250%;" push="5" >用户名</el-col>
							<el-col :span="10" push="5">
								<el-input v-model="uName" placeholder="请输入用户名" autocomplete="off" prefix-icon="el-icon-user"></el-input>
							</el-col>
						</el-row>
						<el-row  style="margin-top:20px;">
							<el-col :span="3" style="font-size:15px;line-height:250%;" push="5">密码</el-col>
							<el-col :span="10" push="5">
								<el-input v-model="uPassword" placeholder="请输入密码" show-password prefix-icon="el-icon-lock"></el-input>
							</el-col>
						</el-row>
						<el-row style="margin-top:20px">
							<router-link  to="/register">没有账号？点击注册</router-link>
						</el-row>
						<el-row  style="margin-top:20px;">
							<el-col :span="2" push="10">
								<el-button type="primary" @click="login" round>登录</el-button>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-aside>
			<el-main>
			</el-main>
		</el-container>
	</div>
</template>

<script>
export default {
  	name: 'Login',
  	data(){
		return{
			uName:'',
			uPassword:''
		}
  	},
 	methods:{
		login(){
			if(this.uName!=''&&this.uPassword!='')
			{
				if(this.uName=='admin'&&this.uPassword=='123456')
				{
					this.$router.push('/managerMain');
					this.$message({
						message:"管理员登录成功",
						type:"success"
					})
				}
				else
				{
					this.$axios.post('http://localhost:9090/user/login',
				{
      					uname:this.uName,
      					pwd:this.uPassword
				})
				.then(res=>{
					console.log(res);
					if(res.data.code=="200")
					{
            this.$store.state.user.isLogin=true
            this.$store.state.user.username=this.uName
							this.$message({
								message:"登录成功",
								type:"success"
							});
							//转到主页面
							this.$router.replace({path: '/front/home'});
							//存储用户名session
							sessionStorage['uName']=this.uName;
							console.log(sessionStorage.getItem('uName'));
					}
					else
					{
						this.$message({
								message:res.data.msg,
								type:"error"
							});
							this.uPassword='';
					}
				})
				}

			}
			else
			{
				this.$message({
					message:"请输入用户名和密码",
					type:"warning"
				});
			}
	}
  }
}
</script>

<style scoped>

#backgrounding{
	background: url("../../assets/svg1.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	position: absolute;
}
.title {
	  width: 100%;
	  display: block;
	  text-align: center;
	  padding-top: 20px;
	  line-height: 1em;
	  color: #333;
	  font-size: 20px;
	  margin-bottom: 20px;
	  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
	}
	.dialog {
	  width: 450px;
	  height: 280px;
	  border: 1px solid #dadada;
	  border-radius: 10px;
	  top: 60%;
	  left: 50%;
	  margin-top: -340px;
	  margin-left: -225px;
	  position: absolute;
	  background-repeat: repeat;
	}
</style>
